<template>
  <div class="pageHead">
    <div class="leftLogo">
      <img src="../../../assets/Header/logo.png" alt />
      <p>荷福安建-管理端</p>
    </div>
    <div class="right">
      <span class="return" @click="returnOut">返回</span>
      <el-select
        v-model="$store.state.projectManage.projectInfo.projectName"
        @change="changeProject"
        class="projectName"
      >
        <!-- <i class="el-icon-caret-bottom"></i> -->
        <el-option
          v-for="item in projectNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span class="exit el-icon-switch-button" @click="returnLogin"></span>
    </div>
  </div>
</template>

<script>
import { getProjectId } from '../../../utils/projectId'
import { getProjectName } from '../../../api/projectInner'
export default {
  data () {
    return {
      projectNameList: []
    }
  },
  methods: {
    returnOut () {
      sessionStorage.setItem('firstNavIndex', 0)
      sessionStorage.setItem('secondNavIndex', 0)
      this.$router.push('/projectMain')
    },
    returnLogin () {
      this.$router.push('/login')
    },
    getProjectNameList () {
      getProjectName().then(res => {
        if (res.data.data) {
          res.data.data.forEach(item => {
            this.projectNameList.push({
              value: item.projectId,
              label: item.projectName
            })
          })
        }
      })
    },
    changeProject (value) {
      localStorage.setItem('projectId', value)
      this.$store.dispatch('projectManage/getProjectInfo', {
        projectId: value
      })
      this.$store.dispatch('projectManage/baseNetList', {
        projectId: value
      })
      this.$store.dispatch('wifiManage/getWifiList', {
        projectId: value
      })
    }
  },
  created () {
    if (!getProjectId()) {
      this.$router.push('/homePage')
      this.$message({
        type: 'error',
        message: '请选择具体的项目'
      })
      // console.log(11166666)
    }
    this.$store.dispatch('projectManage/getProjectInfo')
    this.getProjectNameList()
  }
}
</script>

<style scoped lang="scss">
.pageHead {
  position: relative;
  height: 64px;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  line-height: 64px;
  padding-right: 35px;

  .leftLogo {
    position: absolute;
    left: 0;
    top: 0;
    width: 220px;
    height: 64px;
    img {
      float: left;
      width: 32px;
      height: 32px;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    p {
      float: left;
      padding-left: 58px;
      font-size: 18px;
      color: #4868ff;
      line-height: 64px;
      font-weight: 600;
    }
  }

  .right {
    position: absolute;
    right: 35px;
    .return {
      text-decoration: underline;
      cursor: pointer;
      color: #4868ff;
      font-size: 14px;
      // margin-right: 24px;
    }

    .projectName {
      color: #333333;
      font-size: 16px;
      cursor: pointer;
      width: 250px;
      margin-right: 25px;
      i {
        color: #666;
      }
    }

    .exit {
      color: #333;
      font-size: 16px;
      cursor: pointer;
    }
  }
  ::v-deep .el-select .el-input__inner {
    text-align: right;
    padding-right: 35px;
    border: 0.00833rem solid #ffffff;
  }
}
</style>
